<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="jquery-3.3.1.js"></script>
	<style type="text/css">
	    *
	    {
	    	margin:0;padding:0;
	    }
        div
        {
        	position: absolute;bottom: 0px;background: #ccc;width:100%;text-align: center;height:50px;line-height: 50px;
        }
        input 
        {
        	height:30px;
        }
        button
        {
        	margin-left: 20px;padding: 5px 10px;
        }
        span
        {
        	position:absolute;
        }
        body
        {
        	overflow: hidden;
        }
	</style>
</head>
<body>

   
    <div>
    	<p>吐槽：<input type="text"><button>发布</button></p>
    </div>
	
</body>
</html>
<script type="text/javascript">
	$(function(){
		//注册事件
		$('button').click(function(){
			var colors = ['red','blue','green','yellow','pink','purple'];
			//随机生成一个颜色
			randomColor = parseInt(Math.random()*colors.length);   //Math.random():生成0-1之间的一个随机数
			//距离屏幕的随机高度
			var randomY = parseInt(Math.random() * 400);   //400可以是任意值代替
		    //自动获取屏幕宽度
		    var width = $(window).width();
		    console.log(width);
			//获取input的内容
			var content = $('input').val();
			//创建span标签，并把获取的内容添加到span标签里面
			$('<span></span>')  //创建span
			.text(content)   //设置内容
			.css('color',colors[randomColor])   //设置字体颜色
		    .css('top',randomY)    //设置top值
		    .css('left',width)  //设置left值
		    .css('fontSize','50px')   //设置字体大小
		    .animate({left:-500},10000,'linear',function(){    //添加动画
                //到达终点，删除span
                $(this).remove();
		    }).appendTo('body');   //把span添加到body中


		    //发布信息后清空文本
		    $('input').val(''); 
		});
		

	    //按下enter键也能发布弹幕
	    $('input').keydown(function(e) {
	    	if(e.keyCode == 13)
	    	{
	    		$('button').click();
	    	}
	    });
	});

</script>